<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="main">
    <el-col>
      <el-menu router>
        <el-menu-item index="dashBoard">
          <span class="sp2">
            <el-icon>
              <House />
            </el-icon>
          </span>
          <span>首页</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <!-- 边框 -->
    <dv-border-box1 ref="borderRef">
      <!-- 大屏 -->
      <dv-decoration-1 :color="['red', 'green']" backgroundColor="yellow" style="width: 100%; height: 100vh" />
      <!-- 装饰1 -->
      <div small-bg class="small">
        <dv-decoration-11 style="width:100%;height:100px;">
          <div color-green font-600 bg="~ dark/0">
            <p class="p2">
              浏览统计分析
            </p>
          </div>
        </dv-decoration-11>
      </div>
      <div class="box2">
        <!-- 装饰2 -->
        <div small-bg>
          <dv-decoration-9 style="width:300px;height:300px;">
            <div color-green font-600 class="content" bg="~ dark/0">
              100%
            </div>
          </dv-decoration-9>
        </div>
        <!-- 装饰3 -->
        <div small-bg>
          <dv-decoration-12 style="width:300px;height:300px;" />
        </div>
      </div>
      <p class="p1">
        <!-- 图表 -->
      <div w50rem h25rem flex="~ col" justify-center items-center bg-dark class="box1">
        <div>
          <dv-charts :option="option" style="width: 40rem; height: 25rem" />
        </div>
        <div pt5>
          <p class="p3" btn @click="updateData">点我访问100%</p>
        </div>
      </div>
      <!-- 轮播表 -->
      <div demo-bg>
        <dv-scroll-board :config="config" style="width: 500px; height: 300px" @mouseover="mouseoverHandler"
          @click="clickHandler" />
      </div>
      </p>
    </dv-border-box1>
  </div>
</template>

<script>
export default {
  name: 'DashBoard',
  data () {
    return {
      // 图表数据
      option: {
        title: {
          text: '当日浏览占比',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [
              {
                name: 'itemA',
                value: 55
              }
            ],
            center: ['50%', '55%'],
            axisLabel: {
              formatter: '{value}%',
              textStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              lineStyle: {
                color: '#fff'
              }
            },
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      // 轮播表数据
      config: {
        header: ['星期', '访问量', '是否达到'],
        data: [
          ['一', '2.1w', '否'],
          ['二', '3.5w', '是'],
          ['三', '6.8w', '是'],
          ['四', '2.4w', '是'],
          ['五', '2.2w', '否'],
          ['六', '2.5w', '是'],
          ['天', '0.8w', '否']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  methods: {
    // 图表方法
    updateData () {
      this.option.series[0].data[0].value = Math.floor(Math.random() * 100)
    },
    // 轮播表方法
    mouseoverHandler (e) {
      console.log(e)
    },
    clickHandler (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  background-color: #a7afaf;
  .sp2 {
  color: #ffd04b;
}

.el-col {
  margin-bottom: 25px;
}

.p1 {
  display: flex;
  justify-content: space-around;

  .box1 {
    margin-right: 30px;
  }
}

.small {
  margin-bottom: 50px;

  .p2 {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 80px;
    color: #110fa3;
  }
}

// 装饰css
.content {
  font-size: 28px;
  text-shadow: 0 0 3px #7acaec;
}
.box2{
  display: flex;
  justify-content: space-around;
  margin-bottom: 100px;
}
}
.p3{
  width: 200px;
  height: 50px;
  background-color: #1f6fd8;
  text-align: center;
  line-height: 50px;
  color: #f17109;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 120px;
}
</style>
